<template>
    <div>
        <el-form ref="form" :model="form" label-width="110px" :label-position="labelPosition" :rules="rules"
                 style="margin-left: 5%;margin-right: 5%">
            <el-form-item label="公司（机构）证件 ："  >
                <el-table
                        :data="fileList"
                        border
                        style="width: 100%"
                        @cell-click="downloadFile">
                    <el-table-column
                            prop="name"
                            label="文件名">
                    </el-table-column>
                    <el-table-column
                            prop="updateDate"
                            label="操作"
                            width="105px">
                        <template slot-scope="scope">
                            <el-button
                                    v-if="scope.row.type == 1"
                                    size="mini"
                                    type="text"
                                    @click="deleteFile(scope.row)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <upload-file @getFileList="uploadFile" style="margin-left: 5%;" :disabled="formVisible"></upload-file>

            </el-form-item>

            <el-form-item label="公司（机构）名称 ：" prop="orgName" >
                <el-input v-model="form.orgName" @change="onNameChange" :disabled="formVisible"></el-input>
            </el-form-item>
            <el-form-item label="统一社会信用代码 ：" prop="orgCode" >
                <el-input v-model="form.orgCode" :disabled="formVisible"></el-input>
            </el-form-item>
            <el-form-item label="邮箱 ：" >
                <el-input v-model="form.email" :disabled="formVisible"></el-input>
            </el-form-item>
            <el-form-item label="约定送达地址 ：" prop="address" id="address">
                <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="联系电话 ：" prop="tel" >
                <el-input v-model="form.tel" :disabled="formVisible"></el-input>
            </el-form-item>

            <el-form-item label="法定代表人（负责人）证件照背面或证件照一 ：" >
                <camera :src="form.idcardFront" :target="getIdCardHeadValue"
                        @getIdCardHeadValue="getIdCardHead"></camera>
            </el-form-item>

            <el-form-item label="法定代表人（负责人）证件照正面或证件照二 ：" >
                <camera2 :src="form.idcardReverse" :target="getIdCardTailValue"
                        @getIdCardTailValue="getIdCardTail"></camera2>
            </el-form-item>
            <el-form-item label="法定代表人（负责人）姓名 ：" prop="name" >
                <el-input v-model="form.name" :disabled="formVisible"></el-input>
            </el-form-item>
            <el-form-item label="法定代表人（负责人）证件类型 ：" >
                <el-select v-model="form.idType" placeholder="请选择证件类型" :disabled="formVisible">
                    <el-option label="身份证" value="身份证"></el-option>
                   <!-- <el-option label="护照" value="护照"></el-option>-->
                </el-select>
            </el-form-item>
            <el-form-item label="法定代表人（负责人）证件号码 ：" prop="idcard" >
                <el-input v-model="form.idcard" :disabled="formVisible"></el-input>
            </el-form-item>
            <el-form-item label="法定代表人（负责人）手机号码 ：" prop="mobile" >
                <el-input v-model="form.mobile" :disabled="formVisible"></el-input>
            </el-form-item>
            <el-form-item label="开户行 ：" prop="bankName" >
                <div>
                    <el-input v-model="form.bankName" placeholder="例如：XXX银行XXXX支行" :disabled="formVisible"
                              style="width: 85%; margin-right: 5%"></el-input>
                    <el-tooltip class="item" effect="dark" content="请输入银行卡开户行支行信息，例如XXX银行XXXX支行。（支行信息可通过银行卡背面客户服务热线查询。）"
                                placement="bottom-end">
                        <span class="el-icon-info"></span>
                    </el-tooltip>
                </div>
            </el-form-item>
            <el-form-item label="银行帐号 ：" prop="bankAccount" >
                <el-input v-model="form.bankAccount" :disabled="formVisible"></el-input>
            </el-form-item>
            <el-form-item label="户名 ：" prop="bankUname">
                <el-input v-model="form.bankUname" disabled></el-input>
            </el-form-item>
            <el-form-item label="是否参加债权人大会: " >
                <el-select v-model="form.attendState" placeholder="请选择"  >
                    <el-option
                            v-for="state in attendStateList"
                            :key="state.value"
                            :label="state.value"
                            :value="state.value">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div style="width: 100%; text-align: center">
            <el-button type="primary" @click="nextPage('form')" style="width: 60%">{{creditorButton}}</el-button>
        </div>
        <el-dialog
                :title="fileTitle"
                :visible.sync="fileVisible"
                width="95%"
                center>
            <pdf-shower v-if="fileType" :url="fileUrl" style="width: 100%"></pdf-shower>
            <img  v-if="!fileType" :src="fileUrl" style="width: 100%"/>
        </el-dialog>
    </div>
</template>

<script>
    import Camera from '../../upload/upload-image.vue'
    import Camera2 from '../../upload/upload-image_2.vue'
    import UploadFile from '../../upload/upload-button-text.vue'
    import util from 'assets/js/util.js'
    import conf from 'assets/js/conf.js'
    import PdfShower from 'components/pdf/pdf-shower.vue'

    export default {
        data() {
            return {
                getIdCardHeadValue: 'getIdCardHeadValue',
                getIdCardTailValue: 'getIdCardTailValue',
                idCardHead: false,
                idCardTail: false,
                fileVisible: false,
                fileUrl: '',
                total: 0,
                fileType: false,
                formVisible: false,
                fileTitle: '',
                labelPosition: 'top',
                fileList: [],
                attendState: '不确定',
                attendStateList: [
                    {
                        value: '不确定'
                    }, {
                        value: '参加现场会议'
                    }, {
                        value: '参加在线会议'
                    },
                ],
                rules: {
                    orgName: [
                        {required: true, message: '请输入公司（机构）名称', trigger: 'blur'}
                    ],
                    orgCode: [
                        {required: true, message: '请输入统一社会信用代码', trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '请输入约定送达地址', trigger: 'blur'}
                    ],
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                        {min: 2, max: 20, message: '请输入正确格式的姓名', trigger: 'blur'}
                    ],
                    idcard: [
                        {required: true, message: '请输入证件号码', trigger: 'blur'}
                    ],
                    tel: [
                        {required: true, message: '请输入联系电话', trigger: 'blur'}
                    ],
                    mobile: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {pattern: /^1\d{10}$/, message: '请输入正确的手机号'}
                    ],
                    bankName: [
                        {required: true, message: '请输入银行', trigger: 'blur'}
                    ],
                    bankAccount: [
                        {required: true, message: '请输入银行账号', trigger: 'blur'},
                    ],
                    bankUname: [
                        {required: true, message: '请输入户名', trigger: 'blur'},
                    ]
                }
            }
        },
        props: [
            'form',
            'creditorButton'
        ],
        mounted() {
            if (this.form.state === 1) {
                this.formVisible = true;
            }

            if (this.form.idcardFront !== '-1')
                this.idCardHead = true;
            if (this.form.idcardReverse !== '-1')
                this.idCardTail = true;

            let count = 0;
            const _self = this;
            // type 0:pdf, 1:jpg
            util.ajax({
                url: '/file/getFileList',
                params: {eids: this.form.orgFileIds},
                success: function (data) {
                    data.data.forEach(_file => _self.fileList.push({
                        id: _file.id,
                        //type: _file.name.endsWith('pdf') ? 0 : 1,
                        name: '公司（机构）证件' + (++count),
                        count: count,
                        //updateDate: util.formatDate(_file.updateDate)
                    }))
                },
            });
        },
        methods: {
            uploadFile: function (file) {
                if (this.fileList.length > 30) {
                    alert('资料数量太多了, 请于线下邮寄');
                    return;
                }
                this.fileList.push({
                    id: file.id,
                    count: this.fileList.length + 1,
                    name: '公司（机构）证件' + (this.fileList.length + 1),
                    type: 1,
                    // updateDate: util.formatDate(file.updateDate)
                });
                if (this.form.orgFileIds === '')
                    this.form.orgFileIds = file.id;
                else
                    this.form.orgFileIds = this.form.orgFileIds + ',' + file.id;
            },

            nextPage: function (form) {
                if (!conf.inDevelop) {
                    if (!this.idCardHead) {
                        alert('请上传您的证件照背面或证件照一');
                        return;
                    }
                    if (!this.idCardTail) {
                        alert('请上传您的证件照正面或证件照二');
                        return;
                    }
                    if (this.form.orgFileIds === '') {
                        alert('请上传您的公司（机构）证件');
                        return;
                    }
                    const _self = this;
                    this.$refs[form].validate((valid) => {
                        if (valid) {
                            _self.form.idType = _self.matchType(_self.form.idType);
                            _self.$emit('nextPage', _self.form)
                        } else {
                            alert('您输入的信息有误!!');
                            return false
                        }
                    })
                } else {
                    this.form.idType = this.matchType(this.form.idType);
                    this.$emit('nextPage', this.form)
                }
            },

            getIdCardHead: function (file) {
                this.idCardHead = true;
                this.form.idcardFront = file;
            },
            getIdCardTail: function (file) {
                this.idCardTail = true;
                this.form.idcardReverse = file;
            },
            onNameChange: function () {
                this.form.bankUname = this.form.orgName;
            },
            deleteFile: function (row) {
                this.fileList.splice(row.count - 1, 1);
                this.form.orgFileIds = '';
                if (this.fileList.length > 1) {
                    this.fileList.forEach(_file => this.form.orgFileIds += _file.id + ',');
                    this.form.orgFileIds = this.form.orgFileIds.substring(0, this.form.orgFileIds.length - 1);
                }
                let count = 0;
                this.fileList.forEach(_file => {
                    _file.name = '公司（机构）证件 ' + (++count);
                    _file.count = count;
                })
            },
            downloadFile: function (row, column, cell, event) {
                if (column.label === '操作')
                    return;
                this.fileUrl = conf.baseUrl + '/file/get/' + row.id + '?type=1';
                this.fileTitle = row.name;
                if (row.type === 0) {
                    this.fileType = true;
                } else {
                    this.fileType = false;
                }
                this.fileVisible = true;
            },
            matchType: function (typeText) {
                let type = 0;
                switch (typeText) {
                    case '身份证':
                        type = 1;
                        break;
                    case '护照':
                        type = 3;
                        break;
                    default:
                        break
                }
                return type
            },

        },
        components: {
            Camera,
            Camera2,
            UploadFile,
            PdfShower
        }
    }
</script>
<style>
    .el-form-item__label {
        line-height: 0
    }
</style>
